<template>
	<view class="text-center round-20 py-30 bgc-white ">
		<view class="flex-center mb-15">
			<uv-image :src="`${imgPath}mine/dd.svg`" width="40rpx" height="20rpx" />
			<text class="text-32 ml-25 mr-25">各年级英语水平划分表</text>
			<uv-image :src="`${imgPath}mine/dd.svg`" width="40rpx" height="20rpx" />
		</view>
		
		<view class="funnel_cont pt-40 px-30  w-full">
			
			<view class="flex-between items-end w-full relative">
				<view class="flex-center flex-col">
					<view class="levela w-100 flex-center flex-col text-white round-t-5 bgc-red relative">
						<text class="text-28">level</text>
						<text class="text-48 bold">A</text>
					</view>
					<text class="text-24 mt-20">小学</text>
				</view>
				<view class="flex-center flex-col">
					<view class="levelb w-100  flex-col text-white round-t-5 bgc-warning flex-left pt-20 relative">
						<text class="text-28">level</text>
						<text class="text-48 bold">B</text>
					</view>
					<text class="text-24 mt-20">初中</text>
				</view>
				<view class="flex-center flex-col">
					<view class="levelc w-100  flex-col text-white round-t-5 bgc-green flex-left pt-20 relative">
						<text class="text-28">level</text>
						<text class="text-48 bold">C</text>
					</view>
					<text class="text-24 mt-20">高中</text>
				</view>
				<view class="flex-center flex-col">
					<view class="leveld w-100 flex-col  text-white round-t-5 bgc-primary flex-left pt-20 relative">
						<text class="text-28">level</text>
						<text class="text-48 bold">D</text>
					</view>
					<text class="text-24 mt-20">雅思</text>
				</view>
				<view class="number_cont ml-50 text-left">
					<view class="num1 bgc-white relative"></view>
					<view class="num2 bgc-white relative"></view>
					<view class="num3 bgc-white relative"></view>
					<view class="num4 bgc-white relative"></view>
				</view>
				<view class="absolute order top1 w-full text-right">{{ list[3]?.minimumNumber||0 }}</view>
				<view class="absolute order top2 w-full text-right">{{ list[2]?.minimumNumber||0 }}</view>
				<view class="absolute order top3 w-full text-right">{{ list[1]?.minimumNumber||0 }}</view>
				<view class="absolute order top4 w-full text-right">{{ list[0]?.minimumNumber||0 }}</view>
			</view>
			<!-- flex-center flex-col  -->
			
		</view>
		<!-- <view class="flex-col items-end relative" flex-center flex-col>
			<uv-image src="/static/funnel.png" mode="aspectFill" width="465rpx" height="330rpx" />
			
			<view class="text-24 charts-tip funnel_right" style="--top: 108rpx">{{ list[3].minimumNumber }}</view>
			<view class="text-24 charts-tip funnel_right" style="--top: 172rpx">{{ list[2].minimumNumber }}</view>
			<view class="text-24 charts-tip funnel_right" style="--top: 234rpx">{{ list[1].minimumNumber }}</view>
			<view class="text-24 charts-tip funnel_right" style="--top: 296rpx">{{ list[0].minimumNumber }}</view>
		</view>
		<view class="text-24 mt-25 charts-tip">各年级英语水平划分表</view> -->
	</view>
</template>

<script setup lang="ts">
	import { imgPath } from '@/common/config'
	
	interface ColumnProps { id: number, name: string, minimumNumber: number }
	  
	withDefaults(defineProps<{
		list: ColumnProps[]
	}>(),{
		list: () => ([])
	})
	
</script>

<style scoped lang="scss">
	.charts-tip{color: #3A3F5E}
	// .relative{width: 465rpx;height: 330rpx}
	.funnel_right{position: absolute;top: var(--top);right: 0}
	.funnel_cont{min-height: 530rpx;}
	.levela{height: 120rpx;z-index: 1;}
	.levelb{height: 240rpx;z-index: 1;}
	.levelc{height: 360rpx;z-index: 1;}
	.leveld{height: 440rpx;z-index: 1;}
	.order{ border-bottom: 1px dashed #DADDE5;z-index: 0;}
	.top1{top: 70rpx;}
	.top2{top: 190rpx;}
	.top3{top: 310rpx;}
	.top4{top: 430rpx;}
	.number_cont{height: 530rpx;}
	.num1{margin-top: 90rpx;z-index: 1;}
	.num2{margin-top: 90rpx;z-index: 1;}
	.num3{margin-top: 80rpx;z-index: 1;}
	.num4{margin-top: 80rpx;z-index: 1;}
</style>